/**
 * @description 工具栏
 * @author 大周子
 */
import React, { FC } from "react";
import { Button, Flex, Tooltip } from "antd";
import {
  DeleteOutlined,
  EyeInvisibleOutlined,
  LockOutlined,
  UnlockOutlined,
  CopyOutlined,
  BlockOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  UndoOutlined,
  RedoOutlined,
} from "@ant-design/icons";
//引入usedispatch
import { useDispatch } from "react-redux";
//引入redux删除组件的方法
import { deleteComponent, changeComponentHidden, toogleComponentLock, copyComponentFun, pasteComponent, moveComponent } from "../../../store/componentReducer";
import useGetComponentInfo_redux from "../../../hooks/useGetComponentInfo_redux";
//映入撤销重做
import { ActionCreators } from "redux-undo";

const EditorToolbar: FC = () => {
  const { selectedComponent, copyComponent, selectedId, componentList } = useGetComponentInfo_redux();
  const dispatch = useDispatch();
  // 删除组件
  function deleteCom() {
    dispatch(deleteComponent());
  }
  //隐藏组件
  function hiddenCom() {
    dispatch(changeComponentHidden({ isHidden: true }));
  }
  //锁定组件
  function lockCom() {
    dispatch(toogleComponentLock());
  }
  //复制组件
  function copyCom() {
    dispatch(copyComponentFun());
  }
  //粘贴组件
  function pasteCom() {
    dispatch(pasteComponent());
  }
  const length = componentList.length;
  const selectIndex = componentList.findIndex((c) => c.fe_id === selectedId);
  const upable = selectIndex > 0;
  //上移
  function upCom() {
    dispatch(moveComponent({ oldIndex: selectIndex, newIndex: selectIndex - 1 }));
  }

  //下移
  const downable = selectIndex < length - 1;
  function downCom() {
    dispatch(moveComponent({ oldIndex: selectIndex, newIndex: selectIndex + 1 }));
  }
  //undo
  function undoCom() {
    dispatch(ActionCreators.undo());
  }

  //redo
  function redoCom() {
    dispatch(ActionCreators.redo());
  }
  return (
    <Flex align="center" gap="small" justify="center">
      {/* 删除按钮 */}
      <Tooltip title="删除">
        <Button shape="circle" icon={<DeleteOutlined />} size="small" onClick={deleteCom} />
      </Tooltip>
      {/* 隐藏按钮 */}
      <Tooltip title="隐藏">
        <Button shape="circle" icon={<EyeInvisibleOutlined />} size="small" onClick={hiddenCom} />
      </Tooltip>
      {/* 锁定组件 */}
      <Tooltip title="锁定">
        <Button shape="circle" icon={<LockOutlined />} size="small" onClick={lockCom} disabled={selectedComponent?.islock} />
      </Tooltip>
      <Tooltip title="解锁">
        <Button shape="circle" icon={<UnlockOutlined />} size="small" onClick={lockCom} disabled={!selectedComponent?.islock} />
      </Tooltip>
      {/* 复制粘贴 */}
      <Tooltip title="复制">
        <Button shape="circle" icon={<CopyOutlined />} size="small" onClick={copyCom} />
      </Tooltip>
      <Tooltip title="粘贴">
        {/* 判断保存的复制的组件是否为null，来决定粘贴按钮是否可用 */}
        <Button shape="circle" icon={<BlockOutlined />} size="small" onClick={pasteCom} disabled={copyComponent == null} />
      </Tooltip>
      {/* 上移组件 */}
      <Tooltip title="上移">
        <Button shape="circle" icon={<ArrowUpOutlined />} size="small" onClick={upCom} disabled={!upable} />
      </Tooltip>
      {/* 下移组件 */}
      <Tooltip title="下移">
        <Button shape="circle" icon={<ArrowDownOutlined />} size="small" onClick={downCom} disabled={!downable} />
      </Tooltip>
      {/* 撤销组件 */}
      <Tooltip title="撤销">
        <Button shape="circle" icon={<UndoOutlined />} size="small" onClick={undoCom} />
      </Tooltip>
      {/* 重做组件 */}
      <Tooltip title="重做">
        <Button shape="circle" icon={<RedoOutlined />} size="small" onClick={redoCom} />
      </Tooltip>
    </Flex>
  );
};

export default EditorToolbar;
